<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>demo sc - 注册新账号</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/default.css">
    <script type="text/javascript">
        var FetchCode = function () {

            let fetchInterval = 60;
            let fetchIndex = 0;

            let lockFetch = false;

            var check = function () {
                if ($("#email").val() == "") {
                    window.alert("请填写邮箱！");
                    return false;
                }
                return !lockFetch;
            }

            var reset = function () {
                $("#fetchCode").text("发送验证码");
                lockFetch = false;
            }

            var timeCount = function () {
                fetchIndex--;
                if (fetchIndex == 0) {
                    reset();
                    return;
                }

                $("#fetchCode").text(fetchIndex + "s");
                setTimeout(timeCount, 1000);
            };

            var showStep = function () {
                fetchIndex = fetchInterval;
                $("#fetchCode").addClass("gray");
                timeCount();
            }

            var bind = function () {
                if (!check()) return;

                setTimeout(showStep, 100);

                lockFetch = true;
                $.ajax({
                    url: "/api/code/create/" + $("#email").val(),
                });
            }

            return {
                bind: bind
            }

        }();

        var Register = function () {

            var check = function () {
                if ($("#email").val() == "") {
                    $("#warning").text("请填写邮箱！");
                    return false;
                }
                if ($("#password").val() == "") {
                    $("#warning").text("请填写密码！");
                    return false;
                }
                if ($("#confirmPassword").val() == "") {
                    $("#warning").text("请填写确认密码！");
                    return false;
                }
                if ($("#confirmPassword").val() != $("#password").val()) {
                    $("#warning").text("确认密码与密码不相同！");
                    return false;
                }
                if ($("#code").val() == "") {
                    $("#warning").text("请填写验证码！");
                    return false;
                }

                $("#warning").text("");
                return true;
            }

            var checkRegistered = function () {
                if (!check()) return;

                $.ajax({
                    url: "/api/user/isRegistered/" + $("#email").val(),
                    success: function (result) {
                        if (!!result) {
                            $("#warning").text("当前邮箱已经注册！");
                        } else {
                            checkCode();
                        }
                    }
                });
            }

            var checkCode = function () {
                $.ajax({
                    url: "/api/code/validate/" + $("#email").val() + "/" + $("#code").val(),
                    success: function (result) {
                        if (result == "0") {
                            doRegister();
                        } else if (result == "1") {
                            $("#warning").text("验证码错误");
                        } else if (result == "2") {
                            $("#warning").text("验证码超时！");
                        }
                    }
                });
            }

            var doRegister = function () {
                $.ajax({
                    url: "/api/user/register/" + $("#email").val() + "/" + $("#password").val() + "/" +
                        $("#code").val(),
                    success: function (result) {
                        if (!!result) {
                            window.alert("注册成功！");
                            location.href = "welcome.html";
                        } else {
                            window.alert("注册失败！");
                        }
                    },
                    error: function (xhr) {
                        if (xhr.status == "303") {
                            alert(xhr.statusText + ": " + xhr.responseText);
                            location.href = "login.html";
                        }
                    }
                });
            }

            return {
                bind: checkRegistered
            }
        }();

        $(document).ready(function () {
            $("#fetchCode").bind("click", FetchCode.bind);

            $("#register").bind("click", Register.bind);
        });
    </script>
</head>

<body>
    <div class="container flex">
        <div class="register boxer flex">
            <header>注册新账号</header>
            <div class="boxer-form">
                <div class="inputbox flexr">
                    <span>邮　箱</span>
                    <input type="text" id="email" maxlength="40">
                </div>
                <div class="inputbox flexr">
                    <span>密　码</span>
                    <input type="password" id="password" maxlength="20">
                </div>
                <div class="inputbox flexr">
                    <span>确认密码</span>
                    <input type="password" id="confirmPassword" maxlength="20">
                </div>
                <div class="inputbox flexr">
                    <span>验 证 码</span>
                    <input type="text" id="code" maxlength="6">
                    <a class="fetch" id="fetchCode">发送验证码</a>
                </div>
                <div id="warning" class="warning"></div>
            </div>
            <div class="login_button">
                <button id="register">注册</button>
            </div>
        </div>
    </div>
</body>

</html>